<template>
  <a-card :bordered="false">
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="柱状图" key="1">
        <a-row :gutter="24">
          <a-col :span="10">
            <a-radio-group :value="barType" @change="statisticst">
              <a-radio-button value="year">按年统计</a-radio-button>
              <a-radio-button value="month">按月统计</a-radio-button>
               <a-radio-button value="week">按周统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <div style="height:100px"></div>
          <!-- <bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/> -->
          <div id="myChart" :style="{width: '1500px', height: '400px'}"></div>
          <div></div>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction } from '@/api/manage'
export default {
  name: 'PayChart',
  components: {
    ACol,
    Bar,
    Pie
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      // 查询条件
      queryParam: {},
      // 数据集
      countSource: [],
      // 柱状图
      barType: 'year',
      barDateY: [],
      barDateX:[],
      barValue: [],
      // 饼状图
      pieType: 'year',
      pieDate: ['month', 'month'],
      pieValue: [],
      // 统计图类型
      tabStatus: 'bar',
      url: {
        getYearCountInfo: '/payChart/merchant/monthofYear',
        getMonthCountInfo: '/payChart/merchant/monthofYear',
        getweekCountInfo: '/payChart/merchant/monthofYear',
        getCabinetCountInfo: '/api/report/getCabinetCountInfo'
      }
    }
  },
  mounted() {
    this.drawLine()
  },
  beforeUpdate(){
   this.drawLine()
  },
  created() {
    let url = this.url.getYearCountInfo
    this.loadDate(url, 'year', {  type: 4 })
  },
  methods: {
    loadDate(url, type, param) {
      getAction(url, param).then(res => {
        if (res.success) {
          this.countSource = []
          if (type === 'year') {
            this.getYearCountSource(res.result)
          }
          if (type === 'month') {
            this.getMonthCountSource(res.result)
          }
          if (type === 'week') {
            this.getWeekCountSource(res.result)
          }
        } else {
          var that = this
          that.$message.warning(res.message)
        }
      })
    },
    getYearCountSource(data) {
      console.log('年回调')
      this.barDateX = []
      this.barDateY =[]
      for(let key in data){
        this.barDateX.push(key)
        this.barDateY.push(data[key])
      }
       this.drawLine()
    },
    getMonthCountSource(data) {
      console.log('月回调')
      this.barDateX = []
      this.barDateY =[]
      for(let key in data){
        this.barDateX.push(key)
        this.barDateY.push(data[key])
      }
       this.drawLine()
    },
    getWeekCountSource(data) {
      console.log('周回调')
      this.barDateX = []
      this.barDateY =[]
      
      this.barDateX.push(
          `星期一`,`星期二`,`星期三`,`星期四`,`星期五`,`星期六`,`星期日`)
      for(let key in data){
        this.barDateY.push(data[key])
      }
      console.log("========="+this.barDateX)
       console.log("========="+this.barDateY)
       this.drawLine()
    },
   
    // 选择统计图类别----1
    callback(key) {
      if (key === '1') {
        this.tabStatus = 'bar'
        this.queryDatebar()
      } else {
        this.tabStatus = 'pie'
        this.queryDatepie()
      }
    },
    // 选择统计类别  ----a
    statisticst(e) {
      if (this.tabStatus === 'pie') {
        this.pieType = e.target.value
        this.queryDatepie()
      } else {
        this.barType = e.target.value
        this.queryDatebar()
      }
    },
    // 按月（年,周）份查询----2 b 给url写参数
    queryDatebar() {
      if (this.barType === 'year') {
          this.getUrl(this.barType, {  type: 4 })
        } else if(this.barType === 'month') {
          this.getUrl(this.barType, {  type: 3 })
        }else if(this.barType === 'week'){
          this.getUrl(this.barType, {  type: 2 })
        }
    },
    queryDatepie() {
       if (this.barType === 'year') {
          this.getUrl(this.barType, {  type: 4 })
        }  else if(this.barType === 'month') {
          this.getUrl(this.barType, {  type: 3 })
        }else if(this.barType === 'week'){
          this.getUrl(this.barType, {  type: 2 })
        }
    },
    //查询时间
    searchReset() {
      console.log(this.tabStatus)
      if (this.tabStatus === 'pie') {
        this.pieValue = []
      } else {
        this.barValue = []
      }
      this.getUrl(this.barType, {})
    },
    // 选择请求url
    getUrl(type, param) {
      console.log('输出参数' + JSON.stringify(param))
      let url = ''
      if (type === 'year') {
        url = this.url.getYearCountInfo
      }
      if (type === 'month') {
        url = this.url.getMonthCountInfo
      }
      if (type === 'week') {
        url = this.url.getweekCountInfo
      }
      if (type === 'cabinet') {
        url = this.url.getCabinetCountInfo
      }
      this.loadDate(url, type, param)
    },
    // 选择月份日期
    handleBarDate(value, mode) {
      this.barValue = value
      this.barDate = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    handlePieDate(value, mode) {
      this.pieValue = value
      this.pieDate = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    drawLine() {
    var echarts = require('echarts')
    var myChart = echarts.init(document.getElementById('myChart'))
    myChart.setOption({
      title: {
        text: '   商店收益报表统计'
      },
      tooltip: {},
      xAxis: {
        data: this.barDateX
      },
      yAxis: {},
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: this.barDateY
        }
      ]
    })
  }
  }
}
</script>

<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px;
}

.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.statistic {
  padding: 0px !important;
  margin-top: 50px;
}

.statistic h4 {
  margin-bottom: 20px;
  text-align: center !important;
  font-size: 24px !important;
}

.statistic #canvas_1 {
  width: 100% !important;
}
</style>